<template>
    <div style="display: flex;width: 100%;height: 100vh; background-color: black;">
        <!-- 左边 -->
        <div style="width: 50%;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <W网页和代码基础 :代码="代码" :访问路径="访问路径" :组件名="组件名" />
        </div>
        <!-- 右边 -->
        <div style="width: 50%;background-color: rgba(25, 8, 36, 0.521);color: aliceblue; min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 180px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="组件修改">刷新组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 类型 -->
                    <div :style='样式1'>
                        <h4>类型 : </h4>
                        <spen :style='样式2'>英:type,类型:string 等原生 input 类型,默认:text</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.type' size='small'>
                            <el-radio label="text">文本 </el-radio>
                            <el-radio label="textarea">多行输入 </el-radio>
                            <el-radio label="password">密码 </el-radio>
                            <el-radio label="button">按钮 </el-radio>
                            <el-radio label="checkbox">选择框 </el-radio>
                            <el-radio label="file">文件 </el-radio>
                            <el-radio label="number">数字 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 绑定值 -->
                    <div :style='样式1'>
                        <h4>绑定值 : </h4>
                        <spen :style='样式2'>英:v_model,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.v_model'
                            size='small'></el-radio-group></div>
                    <!-- 最大输入长度 -->
                    <div :style='样式1'>
                        <h4>最大输入长度 : </h4>
                        <spen :style='样式2'>英:maxlength,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.maxlength' size='small'>
                            <el-radio label=50>有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 原生属性，最小输入长度 -->
                    <div :style='样式1'>
                        <h4>原生属性，最小输入长度 : </h4>
                        <spen :style='样式2'>英:minlength,类型:number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.minlength' size='small'>
                            <el-radio label=10>有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效 -->
                    <div :style='样式1'>
                        <h4>是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效 : </h4>
                        <spen :style='样式2'>英:show_word_limit,类型:boolean,默认:boolean</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.show_word_limit'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 输入框占位文本 -->
                    <div :style='样式1'>
                        <h4>输入框占位文本 : </h4>
                        <spen :style='样式2'>英:placeholder,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.placeholder' size='small'>
                            <el-radio label="我是占位文本 ">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否显示清除按钮，只有当 type 不是 textarea时生效 -->
                    <div :style='样式1'>
                        <h4>是否显示清除按钮，只有当 type 不是 textarea时生效 : </h4>
                        <spen :style='样式2'>英:clearable,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.clearable' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 指定输入值的格式。(只有当 type 是"text"时才能工作) -->
                    <div :style='样式1'>
                        <h4>指定输入值的格式。(只有当 type 是"text"时才能工作) : </h4>
                        <spen :style='样式2'>英:formatter,类型:Function,默认:— 用法 (value: string | number) => string</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.formatter'
                            size='small'></el-radio-group></div>
                    <!-- 指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用) -->
                    <div :style='样式1'>
                        <h4>指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用) : </h4>
                        <spen :style='样式2'>英:parser,类型:Function,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.parser'
                            size='small'></el-radio-group></div>
                    <!-- 是否显示切换密码图标 -->
                    <div :style='样式1'>
                        <h4>是否显示切换密码图标 : </h4>
                        <spen :style='样式2'>英:show_password,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.show_password'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否禁用 -->
                    <div :style='样式1'>
                        <h4>是否禁用 : </h4>
                        <spen :style='样式2'>英:disabled,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.disabled' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 输入框尺寸，只在 type 不为 'textarea' 时有效 -->
                    <div :style='样式1'>
                        <h4>输入框尺寸，只在 type 不为 'textarea' 时有效 : </h4>
                        <spen :style='样式2'>英:size,类型:enum,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.size' size='small'>
                            <el-radio label="large">大 </el-radio>
                            <el-radio label="default">中 </el-radio>
                            <el-radio label="small">小</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 自定义前缀图标 -->
                    <div :style='样式1'>
                        <h4>自定义前缀图标 : </h4>
                        <spen :style='样式2'>英:prefix_icon,类型:string / Component,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.prefix_icon'
                            size='small'></el-radio-group></div>
                    <!-- 自定义后缀图标 -->
                    <div :style='样式1'>
                        <h4>自定义后缀图标 : </h4>
                        <spen :style='样式2'>英:suffix_icon,类型:string / Component,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.suffix_icon'
                            size='small'></el-radio-group></div>
                    <!-- 输入框行数，仅 type 为 'textarea' 时有效 -->
                    <div :style='样式1'>
                        <h4>输入框行数，仅 type 为 'textarea' 时有效 : </h4>
                        <spen :style='样式2'>英:rows,类型:number,默认:number</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.rows' size='small'>
                            <el-radio label=5>有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- textarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 } -->
                    <div :style='样式1'>
                        <h4>textarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 } : </h4>
                        <spen :style='样式2'>英:autosize,类型:boolean / object,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.autosize' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 原生 autocomplete 属性 -->
                    <div :style='样式1'>
                        <h4>原生 autocomplete 属性 : </h4>
                        <spen :style='样式2'>英:autocomplete,类型:string,默认:off</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.autocomplete'
                            size='small'></el-radio-group></div>
                    <!-- 等价于原生 input name 属性 -->
                    <div :style='样式1'>
                        <h4>等价于原生 input name 属性 : </h4>
                        <spen :style='样式2'>英:name,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.name'
                            size='small'></el-radio-group></div>
                    <!-- 原生 readonly 属性，是否只读 -->
                    <div :style='样式1'>
                        <h4>原生 readonly 属性，是否只读 : </h4>
                        <spen :style='样式2'>英:readonly,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.readonly' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 原生 max 属性，设置最大值 -->
                    <div :style='样式1'>
                        <h4>原生 max 属性，设置最大值 : </h4>
                        <spen :style='样式2'>英:max,类型:—,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.max' size='small'>

                            <el-radio label=200>有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 原生属性，设置最小值 -->
                    <div :style='样式1'>
                        <h4>原生属性，设置最小值 : </h4>
                        <spen :style='样式2'>英:min,类型:—,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.min' size='small'>
                            <el-radio label=20>有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 原生属性，设置输入字段的合法数字间隔 -->
                    <div :style='样式1'>
                        <h4>原生属性，设置输入字段的合法数字间隔 : </h4>
                        <spen :style='样式2'>英:step,类型:—,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.step'
                            size='small'></el-radio-group></div>
                    <!-- 控制是否能被用户缩放 -->
                    <div :style='样式1'>
                        <h4>控制是否能被用户缩放 : </h4>
                        <spen :style='样式2'>英:resize,类型:enum,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.resize' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 原生属性，自动获取焦点 -->
                    <div :style='样式1'>
                        <h4>原生属性，自动获取焦点 : </h4>
                        <spen :style='样式2'>英:autofocus,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.autofocus'
                            size='small'></el-radio-group></div>
                    <!-- 原生属性 -->
                    <div :style='样式1'>
                        <h4>原生属性 : </h4>
                        <spen :style='样式2'>英:form,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.form' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 等价于原生 input aria-label 属性 -->
                    <div :style='样式1'>
                        <h4>等价于原生 input aria-label 属性 : </h4>
                        <spen :style='样式2'>英:label,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.label'
                            size='small'></el-radio-group></div>
                    <!-- 输入框的 tabindex -->
                    <div :style='样式1'>
                        <h4>输入框的 tabindex : </h4>
                        <spen :style='样式2'>英:tabindex,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.tabindex'
                            size='small'></el-radio-group></div>
                    <!-- 输入时是否触发表单的校验 -->
                    <div :style='样式1'>
                        <h4>输入时是否触发表单的校验 : </h4>
                        <spen :style='样式2'>英:validate_event,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.validate_event'
                            size='small'></el-radio-group></div>
                    <!-- input 元素或 textarea 元素的 style -->
                    <div :style='样式1'>
                        <h4>input 元素或 textarea 元素的 style : </h4>
                        <spen :style='样式2'>英:input_style,类型:string / object,默认:{}</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.input_style'
                            size='small'></el-radio-group></div>
                    <h2 style="margin-top: 15px;background-color:rgb(63, 45, 45);">-------触发的事件 -----</h2>
                    <!-- 当选择器的输入框失去焦点时触发 -->
                    <div :style='样式1'>
                        <h4>当选择器的输入框失去焦点时触发 : </h4>
                        <spen :style='样式2'>英:blur,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.blur' size='small'>
                            <el-radio label='失去焦点'>有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当选择器的输入框获得焦点时触发 -->
                    <div :style='样式1'>
                        <h4>当选择器的输入框获得焦点时触发 : </h4>
                        <spen :style='样式2'>英:focus,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.focus' size='small'>
                            <el-radio label='获得焦点'>有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 仅当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发 -->
                    <div :style='样式1'>
                        <h4>仅当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发 : </h4>
                        <spen :style='样式2'>英:change,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.change' size='small'>
                            <el-radio label='完成输入'>有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 在 Input 值改变时触发 -->
                    <div :style='样式1'>
                        <h4>在 Input 值改变时触发 : </h4>
                        <spen :style='样式2'>英:input,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.input' size='small'>
                            <el-radio label='发生改变'>有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 在点击由 clearable 属性生成的清空按钮时触发 -->
                    <div :style='样式1'>
                        <h4>在点击由 clearable 属性生成的清空按钮时触发 : </h4>
                        <spen :style='样式2'>英:clear,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.clear' size='small'>
                            <el-radio label='数据清空'>有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>

                </el-scrollbar>

            </div>
        </div>

    </div>
</template>
<script setup>
import W网页和代码基础 from "../网页和代码基础.vue"
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 路由 = proxy.router
const 库 = proxy.lib
const API = proxy.API
const 组件名 = ref('输入框')
const 属性 = ref({
    type: '',//类型
    v_model: '',//绑定值
    maxlength: '',//最大输入长度
    minlength: '',//原生属性，最小输入长度
    show_word_limit: '',//是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效
    placeholder: '',//输入框占位文本
    clearable: '',//是否显示清除按钮，只有当 type 不是 textarea时生效
    formatter: '',//指定输入值的格式。(只有当 type 是"text"时才能工作)
    parser: '',//指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用)
    show_password: '',//是否显示切换密码图标
    disabled: '',//是否禁用
    size: '',//输入框尺寸，只在 type 不为 'textarea' 时有效
    prefix_icon: '',//自定义前缀图标
    suffix_icon: '',//自定义后缀图标
    rows: '',//输入框行数，仅 type 为 'textarea' 时有效
    autosize: '',//textarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 }
    autocomplete: '',//原生 autocomplete 属性
    name: '',//等价于原生 input name 属性
    readonly: '',//原生 readonly 属性，是否只读
    max: '',//原生 max 属性，设置最大值
    min: '',//原生属性，设置最小值
    step: '',//原生属性，设置输入字段的合法数字间隔
    resize: '',//控制是否能被用户缩放
    autofocus: '',//原生属性，自动获取焦点
    form: '',//原生属性
    label: '',//等价于原生 input aria-label 属性
    tabindex: '',//输入框的 tabindex
    validate_event: '',//输入时是否触发表单的校验
    input_style: '',//input 元素或 textarea 元素的 style
    blur: '',//当选择器的输入框失去焦点时触发
    focus: '',//当选择器的输入框获得焦点时触发
    change: '',//仅当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发
    input: '',//在 Input 值改变时触发
    clear: '',//在点击由 clearable 属性生成的清空按钮时触发

})

const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 10px;font-size: 14px;')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')



const 代码 = ref('')
const 访问路径 = ref('http://localhost:3000/#/goinput')

const 组件修改 = async () => {
    访问路径.value = ""
    let 结果 = await API.组件修改(组件名.value, 属性.value, "", "")
    if (结果.err == 'ok') {
        代码.value = 结果.msg
        访问路径.value = 结果.url
        console.log("访问路径", 访问路径.value)
        ElMessage.success("修改成功")
    } else {
        访问路径.value = 结果.url
        ElMessage.error("错误:" + 结果.err)
    }

}

</script>
<style lang="scss"  scoped>
h4 {
    background-color: rgb(65, 104, 75);
    text-align: center;
}
</style>
